<template>
	<view class="onebox">
		<view class="headBg">
			<view class="box3" style="color: #fefefe; font-size: 29rpx; padding-top: 30rpx;">
				我的
			</view>
			<view class="head-content box3 ">
				<image class="img1" src="../../static/syqt/tx.png" mode=""></image>
				<view class="head-content-center">
					<view class="" style="color: #fefefe;">
						{{UserInfo.nickname}}
					</view>
					<view class="" style="color: #bcf9fc;">
						{{UserInfo.signature}}
					</view>
					<view class="" style="color: #3e8777;">
						uiid：845578
					</view>
				</view>
				<image @click="tzHome" class="img2" src="../../static/syqt/gd.png" mode=""></image>
			</view>
			<view class="box3" style="margin-top: 25rpx;">
				<view class="box2" style="color: #fefefe; flex: 1;">
					<view class="box3" style="margin-bottom: 15rpx;">
						<view class="text-left">
							_
						</view>
						<view class="text-right">
							_
						</view>
					</view>
					<view class="">
						贴子
					</view>
				</view>
				<view class="box2" style="color: #fefefe;flex: 1;">
					<view @click="tzpage(1)" class="box3" style="margin-bottom: 15rpx;">
						<view class="text-left">
							_
						</view>
						<view class="text-right">
							_
						</view>
					</view>
					<view class="">
						评论
					</view>
				</view>
				<view class="box2" style="color: #fefefe;flex: 1;">
					<view class="box3" style="margin-bottom: 15rpx;">
						<view class="text-left">
							_
						</view>
						<view class="text-right">
							_
						</view>
					</view>
					<view class="">
						赞赏
					</view>
				</view>
				<view class="box2" style="color: #fefefe;flex: 1;">
					<view @click="tzpage(2)" class="box3" style="margin-bottom: 15rpx;">
						<view class="text-left">
							_
						</view>
						<view class="text-right">
							_
						</view>
					</view>
					<view class="">
						赞过
					</view>
				</view>
			</view>
		</view>
		<view class="class-box box3">
			<view class="item-list" v-for="(item,index) in bannerList" :key="index">
				<view class="box2">
					<image class="img3" :src="item.url" mode=""></image>
					<view class="text-nav">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="empower box3">
			<view class="empower-text">
				开通新学校，帮您低成本创业~
			</view>
			<view class="btn">
				马上开通
			</view>
		</view>

		<Tabbar cureentPage='my'></Tabbar>
	</view>
</template>

<script>
	import $api from '../../common/request3.js'
	import Tabbar from '../../components/tabber.vue'
	export default {
		data() {
			return {
				"bannerList": [{
						'type': 1,
						'title': '我的订单',
						'url': '../../static/syqt/fbb.png'
					},
					{
						'type': 2,
						'title': '红包中心',
						'url': '../../static/syqt/fbb.png'
					},
					{
						'type': 3,
						'title': '我的收入',
						'url': '../../static/syqt/fbb.png'
					},
					{
						'type': 4,
						'title': '我的地址',
						'url': '../../static/syqt/fbb.png'
					},
					{
						'type': 5,
						'title': '我的消息',
						'url': '../../static/syqt/fbb.png'
					},
					{
						'type': 6,
						'title': '我的关注',
						'url': '../../static/syqt/fbb.png'
					},
					{
						'type': 7,
						'title': '橘子中心',
						'url': '../../static/syqt/fbb.png'
					},
					{
						'type': 8,
						'title': '我要签到',
						'url': '../../static/syqt/fbb.png'
					},
				],
				user_id: '0',
				UserInfo: '',
				cover_image: '',
				openid: '123456',
				key: '123456'
			}
		},
		components: {
			Tabbar
		},
		onLoad() {
			this.openid = uni.getStorageSync('openid');
			this.key = uni.getStorageSync('key');
			this.GetUserInfo()
		},
		methods: {
			GetUserInfo() {
				$api.request({
					url: "lt/getUserInfo",
					method: 'POST',
					data: {
						key: this.key,
						openid: this.openid,
						user_id: this.user_id
					}
				}).then((res) => {
					console.log(res.data, '55555')
					this.UserInfo = res.data
					this.cover_image = res.data.cover_image
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			tzHome() {
				uni.navigateTo({
					url: `/pages/index/home?pdsu=1`
				})
			},
			tzpage(type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/my/comment'
					})
					return
				}
				if (type == 2) {
					uni.navigateTo({
						url: '/pages/my/zan'
					})
					return
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.onebox {
		min-height: 100vh;
		background-color: #F6F7F8;
	}

	.headBg {
		width: 750rpx;
		height: 400rpx;
		background-color: #63d6ba;
	}

	.img1 {
		width: 135rpx;
		height: 134rpx;
		margin-right: 37rpx;
		border-radius: 100%;
	}

	.img2 {
		width: 35rpx;
		height: 45rpx;
		margin-left: 150rpx;
	}

	// 水平不居中
	.box1 {
		display: flex;
		align-items: center;
	}

	// 垂直且居中
	.box2 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	// 水平且居中
	.box3 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.head-content {
		margin-top: 45rpx;
	}

	.text-left {
		font-size: 40rpx;
		margin-right: 5rpx;
		font-weight: 600;
	}

	.text-right {
		font-size: 40rpx;
		font-weight: 600;
	}

	.class-box {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx 10px;
		width: 95%;
		flex-wrap: wrap;



	}

	.img3 {
		width: 50rpx;
		height: 50rpx;
	}

	.item-list {
		flex: 0 0 auto;
		width: 24%;
		/* 根据需要调整宽度 */
		margin: 10px 0rpx;
		/* 设置间隔 */
		box-sizing: border-box;
		/* 防止padding影响实际宽度 */
	}

	.text-nav {
		font-size: 26rpx;
		margin-top: 10rpx;
		color: #333333;
	}

	.empower {
		margin: 0 20rpx;
		background: linear-gradient(180deg, #e3fbfa 0%, #fff 100%);
		height: 80rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;

		.empower-text {
			font-size: 28rpx;
			flex: 1;
		}

		.btn {
			padding: 10rpx 20rpx;
			background-color: #63d6ba;
			color: #fff;
			font-size: 22rpx;
			border-radius: 30rpx;
		}
	}
</style>